<!DOCTYPE>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="scrollbar/perfect-scrollbar.css" />
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script src="scrollbar/perfect-scrollbar.jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="jquery.emoji/jquery.emoji.css" />
    <script src="jquery.emoji/jquery.emoji.config.js" type="text/javascript"></script>
    <script src="jquery.emoji/jquery.emoji.js" type="text/javascript"></script>
    <script>
        var showIndex = 0;
        $(function() {
            $("#txtEmoji").emoji({
                triggerBtn: "#btnTest"
            });
            $("#result").emoji({
                triggerBtn: "#btnDiv",
                showTab: true
            });
        })

        function getHtml() {
            $("#html").html($("#txtEmoji").val()).emoji("parseToHtml");
        }
    </script>
    <style>
        #result {
            border: solid 1px #c7c6c6;
            width: 400px;
            height: 100px;
        }
    </style>
</head>

<body>
    <input type="text" id="txtEmoji">
    <button type="button" id="btnTest">测试Input</button>
    <button type="button" onclick="getHtml()">转换</button>
    <div id="html">

    </div>
    <div id="emojiContainer" style="display: none;">
    </div>

    <div id="result" class="emoji_input" contenteditable="true"></div>
    <button id="btnDiv" type="button">测试div</button>
</body>

</html>